<template>
	<view class="container" :style="appThemeStyle">
		<Navbar :page="page" />
		<!-- 店铺页面组件 --> 
		<Page :items="items" />
		<div v-if="list.length">
			<good :good="item" v-for="item in list" :key="item"></good>
		</div>
		<!-- 开屏推广弹窗 -->
		<PromotePopup v-if="enablePromote" />
		<!-- 用户隐私保护提示（仅微信小程序） -->
		<!-- #ifdef MP-WEIXIN -->
		<PrivacyPopup :hideTabBar="true" @end="onPrivacyEnd()" />
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		setCartTabBadge
	} from '@/core/app'
	import * as Api from '@/api/page'
	import Page from '@/components/page'
	import PrivacyPopup from '@/components/privacy-popup'
	import PromotePopup from '@/components/promote-popup'
	import platform from '@/core/platform'
	import good from '@/components/good/index.vue'
	import Navbar from '@/components/page/diyComponents/header/index.vue'
	import img from '@/utils/imgs.js'
	const App = getApp()

	export default {
		components: {
			Navbar,
			Page,
			PrivacyPopup,
			PromotePopup,
			good
		},
		data() {
			return {
				img,
				// 页面参数
				options: {},
				// 页面属性
				page: {},
				// 页面元素
				items: [],
				list: [],
				current: 1,
				// 启用开屏推广
				enablePromote: platform != 'MP-WEIXIN'
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 当前页面参数
			this.options = options
			// 加载页面数据
			this.getPageData()
			// this.getList()
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 更新购物车角标
			setCartTabBadge()
		},

		methods: {
			async getList() {
				const res = await this.$api.youApi.list({
					page: this.current,
					type: 4
				})
				this.list = res.data.goods || []
			},
			/**
			 * 加载页面数据
			 * @param {Object} callback
			 */
			getPageData(callback) {
				const app = this
				// const pageId = app.options.pageId || 0
				const pageId = 10001
				Api.detail(pageId)
					.then(result => {
						// 设置页面数据
						const {
							data: {
								pageData
							}
						} = result
						app.page = pageData.page
						app.items = pageData.items
						// 设置顶部导航栏栏
						app.setPageBar()
					})
					.finally(() => callback && callback())
			},

			/**
			 * 设置顶部导航栏
			 */
			setPageBar() {
				const {
					page
				} = this
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: page.params.title
				})
				// 设置navbar标题、颜色
				uni.setNavigationBarColor({
					// #ifndef MP-ALIPAY
					frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
					// #endif
					backgroundColor: page.style.titleBackgroundColor
				})
			},

			// 用户隐私保护提示结束事件
			onPrivacyEnd() {
				this.enablePromote = true
			},

		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.shareTitle,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.shareTitle,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		// background: #fff;
		background: linear-gradient(#FF8A1F 0%, #FF8A1F 150rpx, rgba(255, 138, 31, 0) 450rpx);
	}
	.dot{
		position: absolute;
		right: 0;
		top: 0;
		width: 16rpx;
		height: 16rpx;
		background: #FD3044;
		border-radius: 50%;
	}
</style>